<template>
    <div>
        <ButtonGroup>
            <Button type="primary" @click="modal1 = true,czTitle='添加数据'">添加数据</Button>
            <Modal
                v-model="modal1"
                :title="czTitle"
                @on-ok="ok(paramsId)"
                @on-cancel="cancel">
                <Form :model="formRight" label-position="right" :label-width="100">
                    <FormItem label="标题">
                        <Input v-model="formRight.title"></Input>
                    </FormItem>
                    <FormItem label="内容">
                        <Input v-model="formRight.text"></Input>
                    </FormItem>
                    <FormItem label="评论数">
                        <Input v-model="formRight.comment"></Input>
                    </FormItem>
                </Form>
            </Modal>
            <Button type="error" @click="monRemove">批量删除</Button>
        </ButtonGroup>
        <Input v-model="filter.title">
            <Button slot="append" icon="ios-search" @click="Search"></Button>
        </Input>
        <Table border :columns="columns" :data="comments" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" @on-change="onChange" @on-page-size-change="ps" :page-size="filter.limit" show-sizer></Page>
    </div>
</template>    
<script>
import {bass} from "./common/Bass"
    export default {
        mixins:[bass],
        data () {
            return {
                model:'news',
                formRight: {
                    title: '',
                    text: '',
                    comment: ''
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.title)
                            ]);
                        }
                    },
                    {
                        title: '内容',
                        key: 'text'
                    },
                    {
                        title: '评论数',
                        key: 'comment'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.czTitle = "修改数据";
                                            this.modal1 = true,
                                            this.paramsId = params.row._id.toString()
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        }
    }
</script>